<template>
  <div style="background-color: #f7f7f7;padding-bottom:10px;">
    <div class="filter-wrapper">
      <div class="choosed flex-x-bet-y-center">
        <div class="flex-y-center">
          <span>筛选条件：</span>
          <el-tag
            size="mini"
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>

        <div class="clear-choosed flex-xy-center">清空全部条件</div>
      </div>
      <div class="filter-rows flex">
        <div class="cate-title">地区：</div>
        <div class="flex-y-center" style="flex-wrap: wrap">
          <div class="flex-y-center cate" v-for="(item, index) in 10" :key="index">
            华东地区
          </div>
        </div>
      </div>
      <div class="filter-rows flex">
        <div class="cate-title">城市：</div>
        <div class="flex-y-center" style="flex-wrap: wrap">
          <div class="flex-y-center cate" v-for="(item, index) in 20" :key="index">
            沈阳
          </div>
        </div>
      </div>
      <div class="filter-rows flex">
        <div class="cate-title">类别：</div>
        <div class="flex-y-center" style="flex-wrap: wrap">
          <div class="flex-y-center cate" v-for="(item, index) in 2" :key="index">
            沈阳
          </div>
        </div>
      </div>
      <div class="filter-rows flex">
        <div class="cate-title">组别：</div>
        <div class="flex-y-center" style="flex-wrap: wrap">
          <div class="flex-y-center cate" v-for="(item, index) in 2" :key="index">
            沈阳
          </div>
        </div>
      </div>
      <div class="filter-rows flex">
        <div class="cate-title">名称：</div>
        <div class="flex-y-center" style="flex-wrap: wrap">
          <div class="flex-y-center cate" v-for="(item, index) in 2" :key="index">
            沈阳
          </div>
        </div>
      </div>
    </div>
    <div class="sort-wrapper flex">
      <div class="sort-item">默认排序</div>
      <div class="sort-item">
        发布日期
        <img src="@/assets/img/sort-asc.png" class="sort-icon" />
      </div>
      <div class="sort-item">
        年份
        <img src="@/assets/img/sort-asc.png" class="sort-icon" />
      </div>
      <div class="sort-item">
        价格
        <img src="@/assets/img/icon-price-asc.png" class="sort-icon price-icon" />
      </div>
    </div>
    <div class="product-list">
      <product-item v-for="(item, index) in 10" :key="index"></product-item>
    </div>

    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
  </div>
</template>

<script>
import ProductItem from '@/components/ProductItem.vue';
export default {
  name: "ProductList",
  components:{
    ProductItem
  },
  data() {
    return {
      dynamicTags: ["标签一", "标签二", "标签三"],
      total:20,
      queryParams:{
        pageNum:1,
        pageSize: 10
      }
    };
  },
  created() {},
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    getList(){}
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tag--mini {
  margin-right: 20px;
  font-size: .2rem;
}

.filter-wrapper {
  width: 1200px;
  background: #ffffff;
  margin: auto;

  .choosed,
  .filter-rows {
    padding: 20px 30px;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
  }

::v-deep .el-tag--mini{
  font-size: 16px;
}

  .clear-choosed {
    width: 120px;
    height: 30px;
    background: #fe5a13;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
  }

  .filter-rows {
    border-top: 1px solid #f1f1f1;
    padding-bottom: 12px;

    .cate-title {
      flex-shrink: 0;
      margin-right: 30px;
      margin-bottom: 8px;
      padding-top: 5px;
    }

    .cate {
      color: #818181;
      margin-right: 30px;
      padding: 5px 9px;
      border-radius: 4px;
      cursor: pointer;
      margin-bottom: 8px;
    }

    .active,
    .cate:hover {
      background: #fe5a13;
      color: #fff;
    }
  }
}

.sort-wrapper {
  width: 1200px;
  height: 52px;
  background: #ffffff;
  margin: 12px auto;

  .sort-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    cursor: pointer;
    border-right: 1px solid #ededed;

    .sort-icon {
      width: 20px;
      height: 20px;
    }

    .price-icon {
      position: relative;
      top: 2px;
    }
  }
}

.product-list{
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin: auto;
}

.product-list{
    flex-wrap: wrap;

   ::v-deep .com-product-item:nth-of-type(5n){
        margin-right: 0;
    }

    ::v-deep .com-product-item{
        margin-bottom: 18px;
    }
}
</style>
